import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Checkbox, Form, Input, message } from "antd";
import { UserOutlined, UnlockOutlined } from "@ant-design/icons";
import { useDispatch } from "react-redux";
import { login } from "@/store/modules/user";
import "./index.scss";

export default function Login() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(false)
  const onFinish = async (value) => {
    setLoading(true)
    try {
      await dispatch(login(value));
      navigate("/");
      message.success('登录成功')
      setLoading(false)
    } catch (error) {
      setLoading(false)

    }

  };
  return (
    <div className="login">
      <div className="login-box">
        <div className="title">欢迎登录轨道检测管理系统</div>
        <Form
          name="basic"
          initialValues={{
            remember: true,
          }}
          autoComplete="off"
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: "请输入账号!",
              },
            ]}
          >
            <Input prefix={<UserOutlined />} />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码!",
              },
            ]}
          >
            <Input.Password prefix={<UnlockOutlined />} />
          </Form.Item>

          {/* <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input.Password />
          </Form.Item> */}

          <Form.Item name="remember" valuePropName="checked" label={null}>
            <Checkbox>记住密码</Checkbox>
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" loading={loading} htmlType="submit" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
